<template>
  <div class="mainBody">
    <div class="mainImgBox">
      <div class="titleTop">
        <span class="fontHt">番剧视频添加</span>
      </div>
      <img src="http://mcgamehome.love/img/background/qOUe5d.jpg" alt="http://mcgamehome.love/img/background/qOUe5d.jpg">
    </div>
    <div class="nrBody">
      <div class="addOne"><span>视频名称</span><input v-model.trim="list.items.vName" class="commentInput" type="text" placeholder="视频名称"></div>
      <div class="addOne"><span>视频描述</span><textarea v-model.trim="list.items.vMsg" class="commentInput errorShow" type="text" placeholder="视频简介描述"></textarea></div>
      <div class="addVideoUrlBox">
        <div class="addOne"><span>大图链接</span><input v-model.trim="list.items.vImgL" class="commentInput marl20" type="text" placeholder="视频大图链接"></div>
        <div class="addOne"><span class="mar-l-10">小图链接</span><input v-model.trim="list.items.vImg" class="commentInput" type="text" placeholder="视频小图链接"></div>
      </div>
      <div class="addVideoUrlBox">
        <div class="addOne"><span>演员声优</span><input v-model.trim="list.items.vPerson" class="commentInput marl20" type="text" placeholder="演员声优"></div>
        <div class="addOne"><span class="mar-l-10">视频属性</span><input v-model.trim="list.items.vTypeA" class="commentInput" type="text" placeholder="视频内容大标签，例：番剧"></div>
      </div>
      <div class="addVideoUrlBox">
        <div class="addOne"><span>视频综合</span><input v-model.trim="list.items.vTitleTip" class="commentInput marl20" type="text" placeholder="视频综合简介"></div>
        <div class="addOne"><span class="mar-l-10">更新集数</span><input v-model.trim="list.items.vEpic" class="commentInput marl20" type="text" placeholder="视频更新集数"></div>
        <div class="addOne"><span class="mar-l-10">视频属性</span><input v-model.trim="list.items.vSType" class="commentInput" type="text" placeholder="视频内容标签"></div>
      </div>

      <div class="SXOne-x">
        <button type="button" class="buttonBox">
          <span class="fontHt">发布时间</span>
        </button>
        <button type="button" class="buttonBox" v-for="(item , index) in list.years" :key="index" :class="{active:activeIndex3 === index+1 }" @click="activeC3(index+1,item.year)">
          <span class="fontHt">{{item.year}}</span>
        </button>
      </div>
      <div class="SXOne-x">
        <button type="button" class="buttonBox">
          <span class="fontHt">视频类型1</span>
        </button>
        <button type="button" class="buttonBox" v-for="(item , index) in videoType" :key="item.id" :class="{active:activeIndex5 === index+1}" @click="activeC5(index+1,item.type)">
          <span class="fontHt">{{item.type}}</span>
        </button>
      </div>

      <div class="SXOne-x">
        <button type="button" class="buttonBox">
          <span class="fontHt">视频类型2</span>
        </button>
        <button type="button" class="buttonBox" v-for="(item , index) in videoType" :key="item.id" :class="{active:activeIndex6 === index+1}" @click="activeC6(index+1,item.type)">
          <span class="fontHt">{{item.type}}</span>
        </button>
      </div>

      <div class="SXOne">
        <button type="button" class="buttonBox">
          <span class="fontHt">发布地区</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex2 === 1 }" @click="activeC2(1,'中国')">
          <span class="fontHt">中国</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex2 === 2 }" @click="activeC2(2,'日本')">
          <span class="fontHt">日本</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex2 === 3 }" @click="activeC2(3,'欧美')">
          <span class="fontHt">欧美</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex2 === 4 }" @click="activeC2(4,'其他')">
          <span class="fontHt">其他</span>
        </button>
      </div>
      <div class="SXOne">
        <!--      <span class="fontHt">视频状态:</span>-->
        <button type="button" class="buttonBox">
          <span class="fontHt">完结状态</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex === 1 }" @click="activeC(1)">
          <span class="fontHt">连载中</span>
        </button>
        <button type="button" class="buttonBox" :class="{active:activeIndex === 2 }" @click="activeC(2)">
          <span class="fontHt">已完结</span>
        </button>
      </div>
      <div class="butBox">
        <button type="button" class="commentUpButton fontHt" @click="insert">添加并跳转链接添加</button>
        <button type="button" class="commentUpButton fontHt" @click="upDate">修改</button>
      </div>
    </div>
  </div>
  <div class="backTip" v-show="backTip">{{backTip}}</div>
</template>

<script setup>

import {onMounted, reactive, ref, watch} from "vue";
import {useRoute} from "vue-router";
import API from "@/api/AxiosConfig";

const route = useRoute()
const newYear = []
let year = new Date().getFullYear()
const activeIndex = ref(1)
const activeIndex3 = ref(1)
const activeIndex5 = ref(1)
const activeIndex2 = ref(1)
const activeIndex6 = ref(1)
const activeIndex5text = ref(null)
const activeIndex6text = ref(null)
const backTip = ref(null)
const videoType = [{id:1,type:'原创'},{id:2,type:'漫画改'},{id:3,type:'小说改'},{id:4,type:'游戏改'},{id:5,type:'布袋戏'},{id:6,type:'热血'},
  {id:7,type:'穿越'},{id:8,type:'奇幻'},{id:9,type:'战斗'},{id:10,type:'搞笑'},{id:11,type:'日常'},{id:12,type:'科幻'},{id:13,type:'萌系'},
  {id:14,type:'治愈'},{id:15,type:'校园'},{id:16,type:'少儿'},{id:17,type:'泡面'},{id:18,type:'恋爱'},{id:19,type:'少女'},{id:20,type:'魔法'},
  {id:21,type:'冒险'},{id:22,type:'历史'},{id:23,type:'架空'},{id:24,type:'机战'},{id:25,type:'励志'},{id:26,type:'音乐'},{id:27,type:'推理'},
  {id:28,type:'催泪'},{id:29,type:'美食'},{id:30,type:'偶像'},{id:31,type:'乙女'},{id:32,type:'职场'},{id:33,type:'神魔'},{id:34,type:'性转'}]

const list = reactive({
  years: [],
  items: {
    vName:'',
    vMsg:'',
    vType:videoType[0].id,
    vData:'',
    vEpic:1,
    vIndex:1,
    vImg:'',
    vImgL:'',
    vPerson:'',
    vTypeA:'番剧',
    vUpTime:'',
    vTitleTip:'',
    vSType:'',
    vType2:videoType[0].id,
    vAddress:1,
    vTime:null,
    vSc:0,
    vZf:0
  }
})

watch(()=>list.items.vEpic,()=>{
  list.items.vSType = activeIndex5text.value+','+activeIndex6text.value+','+list.items.vEpic
},{deep:true,immediate:true})
onMounted(() => {
  for (let i = 0; i <= 18; i++) {
    list.years.push({
      year: year - i
    })
  }
  if (route.query.id){
    api(route.query.id)
  }
  activeC3(1,list.years[0].year)
})
function api(i) {
  API({ url: '/api/videoOne/'+i, method: 'get' }).then(res => {
    list.items = res.data
    activeIndex5.value = list.items.vType
    activeIndex6.value = list.items.vType2
    activeIndex2.value = list.items.vAddress*1
    activeIndex.value = list.items.vIndex
    activeC5(list.items.vType,videoType[list.items.vType-1].type)
    activeC6(list.items.vType2,videoType[list.items.vType2-1].type)
    for (let i = 0; i <= 18; i++) {
      if (list.items.vTime === list.years[i].year+''){
        activeIndex3.value = i+1
      }
    }
  }).catch(err => {

  })
}
function upDate() {
  list.items.vUpTime = timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
  API({ url: '/api/videoOneSet', method: 'post' ,data:list.items}).then(res => {
    backTip.value = res.data
  }).catch(err => {

  })
}
function insert() {
  list.items.vUpTime = timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
  API({ url: '/api/videoOneInt', method: 'post' ,data:list.items}).then(res => {
    backTip.value = res.data
  }).catch(err => {

  })
}
function activeC3(i,year) {
  activeIndex3.value = i
    list.items.vTime = year
}
function activeC(i) {
  activeIndex.value = i
  list.items.vIndex = i
}
function activeC5(i,span) {
  activeIndex5.value = i
  list.items.vType = i
  activeIndex5text.value = span
  list.items.vSType = activeIndex5text.value+','+activeIndex6text.value+','+list.items.vEpic
}
function activeC6(i,span) {
  activeIndex6.value = i
  list.items.vType2 = i
  activeIndex6text.value = span
  list.items.vSType= activeIndex5text.value+','+activeIndex6text.value+','+list.items.vEpic
}
function activeC2(i,address) {
  activeIndex2.value = i
  list.items.vAddress = i
}

function timestampToTime(times) {
  let time = times[1]
  let mdy = times[0]
  mdy = mdy.split('/')
  let month = parseInt(mdy[0]);
  let day = parseInt(mdy[1]);
  let year = parseInt(mdy[2])
  return year + '-' + month + '-' + day + ' ' + time
}
</script>

<style lang="less" scoped>
.backTip{
  position: fixed;
  top: 60px;
  right: 10px;
  font-family: 黑体;
  font-weight: bold;
  padding: 6px 12px;
  background-color: #FFFFFF;
  border-radius: 4px;
}
.SXOne{
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.buttonBox{
  border: none;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 0 5px;
  background-color: transparent;
  color: #61666D;
  outline: none;
  cursor: pointer;
}
.buttonBox:hover{
  color: #00AEEC;
}
.SXOne-x{
  width: 100%;
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
.SXOne-x>button{
  margin: 5px 5px;
}
.mar-l-10{
  margin-left: 10px;
}
.addVideoUrlBox{
  width: 100%;
  display: flex;
  //margin-top: 10px;
}
.commentInput{
  display: inline-block;
  box-sizing: border-box;
  overflow: auto;
  border-radius: 6px;
  border: 1px solid #F1F2F3;
  width: 100%;
  height: 45px;
  line-height: 32px;
  transition: 0.2s;
  padding: 5px 10px;
  outline: none;
  vertical-align: middle;
  resize: none;
  font-size: 15px;
  background: #F1F2F3;
  font-family: 黑体;
  font-weight: bold;
}
.commentInput:hover{
  background: white;
}
.errorShow{
  height: 80px;
}
.addOne{
  flex: 1;
  display: flex;
  margin: 10px 0;
}
.addOne>span{
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-content: center;
  margin-right: 10px;
}
.commentUpButton{
 padding: 15px 25px;
  color: white;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 15px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #2d8cf0;
  margin-left: 15px;
}
.butBox{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
}
.nrBody{
  display: flex;
  padding: 35px 35px;
  flex-direction: column;
  font-family: 黑体;
  font-weight: bold;
}
.mainBody{
  display: flex;
  width: 100%;
  flex-direction: column;
}
.mainImgBox{
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.mainImgBox>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.titleTop{
  color: #FFFFFF;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  z-index: 1;
  user-select: none;
}
.fontHt{
  font-family: 黑体;
  font-weight: bold;
}
@media screen and (min-width: 2061px) {
  .nrBody {
    width: 1680px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .nrBody {
    margin: 0 140px 0 140px;
  }
}
.active{
  background-color: #DFF6FD;
  color: #00AEEC;
}
</style>
